<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div class="table" style="margin-top: -12px;">
        <el-table ref="multipleTable"   :data="tableData" max-height="500" style="width: 100%">
            <el-table-column prop="id" align="center" width="150" label="编号" v-if="false">
                <template slot-scope="scope">
                    <span class="id">{{scope.row.id}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sname" align="center" width="150" label="店铺">
                <template slot-scope="scope">
                    <span class="sname">{{scope.row.store.sname}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="img" align="center" width="120px" label="商品">
                <template slot-scope="scope">
                    <img :src="scope.row.storeGoods.img" class="img" alt="" style="width: 120px;height: 120px">
                </template>
            </el-table-column>
            <el-table-column prop="gname" align="center">
                <template slot-scope="scope">
                    <span class="gname">{{scope.row.storeGoods.gname}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sprice" label="单价" align="center">
                <template slot-scope="scope">
                    <span class="sprice">¥{{scope.row.storeGoods.sprice}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="num" label="数量" align="center">
                <template slot-scope="scope">
                    <span class="num">{{scope.row.num}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="小计" align="center">
                <template slot-scope="scope">
                    <span class="price">¥{{scope.row.price}}</span>
                </template>
            </el-table-column>

        </el-table>

    </div>

    <div>
        <el-row :gutter="20">
            <el-col :span="2">
                &nbsp;
            </el-col>
            <el-col :span="16">
                &nbsp;
            </el-col>
            <el-col :span="2">
                <el-button type="text" style="margin-top: 10px; color: #646464;">产品总额：¥{{totalPrice}}
                </el-button>
            </el-col>
            <el-col :span="4">
                &nbsp;
            </el-col>
        </el-row>
    </div>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el:"#app",
        data:{
            active: 0,
            tableData: [],
            totalPrice: 0,
            multipleSelection: [],
        },
        mounted(){
            this.$nextTick(function (){
                app.tableData = window.parent.app.tableData.selection;
                app.totalPrice = window.parent.app.tableData.total;
                // for(var i = 0;i<app.tableData.length;i++){
                //     app.totalPrice += app.tableData[i].price;
                // }
            })
        },
        methods:{
            prev() {
                --app.active;
                if (app.active < 0) app.active = 0
            },
            next() {
                if (app.active++ > 2) app.active = 0
            },
            setTableData(data){
                app.tableData=data;
            },
    },

    })

</script>
</html>
